site_8g/src/app/[locale]/(navbar)/cashWheel/LotteryWheel.tsx

"use client";
import { useRef, useEffect, useState } from 'react';
import styles from "./style.module.scss";



const Lottery = () => {
  const canvasRef = useRef<any>(null);
  const [isSpinning, setIsSpinning] = useState(false);
  const [prize, setPrize] = useState('');
  const segments = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '六等奖', '七等奖', '八等奖'];
  // 4:1940,8:2120
  const segmentAngle = (2 * Math.PI) / segments.length;

  const drawWheel = () => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    const radius = canvas.width / 2;

    // 绘制背景图
    const backgroundImage = new Image();
    backgroundImage.src = '/wheel/spinBg.png'; // 替换为你的背景图路径
    backgroundImage.onload = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); // 绘制背景图

      ctx.save();
      ctx.translate(radius, radius);


      // 绘制奖项文本
      segments.forEach((segment, index) => {
        ctx.save();
        ctx.rotate(index * segmentAngle);
        ctx.fillStyle = '#fff'; // 文字颜色
        ctx.font = '16px Arial';
        ctx.fillText(segment, radius / 2, 8); // 适当调整位置
        ctx.restore();
      });

      ctx.restore();
    };
  };

  const spinWheel = () => {
    if (isSpinning) return;

    setIsSpinning(true);
    let rotation = 0;
    const spinDuration = 5000; // 旋转持续时间
    const stopAngle = Math.floor(Math.random() * segments.length) * (360 / segments.length) + 360 * 5; // 随机停下的角度

    const spinAnimation = (timestamp:any) => {
      rotation += 10; // 每次增加的角度
      canvasRef.current.style.transform = `rotate(${rotation}deg)`;

      if (rotation < stopAngle) {
        requestAnimationFrame(spinAnimation);
      } else {
        setIsSpinning(false);
        const winningSegment = Math.floor(((stopAngle % 360) / (360 / segments.length)));
        setPrize(segments[winningSegment]);
      }
    };

    requestAnimationFrame(spinAnimation);
  };

  useEffect(() => {
    drawWheel();
  }, []);

  return (
    <>
      <img src="/wheel/draw.png" className={`${styles.drawImg} ${styles.position}`} onClick={spinWheel}/>
      <div className={styles.drawContents}>
        <canvas ref={canvasRef} id={styles.draw} width={306} height={306} />
      </div>
      
      {/* <button onClick={spinWheel} disabled={isSpinning}>
        {isSpinning ? '正在抽奖...' : '抽奖'}
      </button> */}
      {/* {prize && <h2>恭喜您，中奖：{prize}</h2>} */}
    </>
  );
};

export default Lottery;